import React, { useEffect, useState } from 'react';
import { t } from '@lingui/macro';
import { Drawer } from '@alifd/next';
import { useStore } from '@/hooks';
import { observer } from 'mobx-react-lite';

import Order from '@/pages/Order';

const BaseModal = ({ model, onCancel, onSubmit, ...formProps }) => {
  const {
    show,
    record,
    type,
  } = model || {};
  const {
    username,
    groupId,
  } = record || {};
  const { memberStore: store } = useStore();
  const [modal, setModal] = useState(show);
  const [params, setParams] = useState(null);

  useEffect(() => {
    const data = {
      groupId,
    };
    setModal(show);
    if (type === 'publish') {
      data.publisherId = username;
    } else {
      data.takeOrderUserId = username;
    }
    setParams(data);
  }, [show]);

  const _TYPE_COMPONENTS = {
    order: {
      name: t`查看订单`,
      key: '1',
      component: <Order queryParams={{
        ...params,
      }}
      />,
    },
  };

  return (
    <>
      <Drawer
        visible={_TYPE_COMPONENTS[show]}
        title={_TYPE_COMPONENTS[show]?.name}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => onCancel?.()}
        width="100%"
      >
        {_TYPE_COMPONENTS[modal]?.component}
      </Drawer>
    </>
  );
};

export default observer(BaseModal);
